<template>
  <el-upload
    :action="baseUrl + '/zhonghang/index/uploadpic'"
    name="pic"
    :multiple="false"
    :data="data"
    :show-file-list="false"
    :on-success="onUploadSuccess"
  >
    <div class="upload">
      <img v-if="pic" class="upload-pic" :src="baseUrl + pic" alt="" />
      <div v-else class="upload-group">
        <img class="upload-plus" src="@/assets/images/image(65).png" alt="" />
        <div class="upload-title">上传商品图片</div>
      </div>
    </div>
  </el-upload>
</template>

<script>
import { getObj } from "@/utils/index";
export default {
  name: "upload",
  props: {
    pic: String,
  },
  computed: {},
  components: {},
  data() {
    return {
      baseUrl: "",
      data: {
        token: "",
      },
    };
  },
  mounted() {
    this.baseUrl = process.env.VUE_APP_BASE_API;
    this.data.token = getObj("health_token");
  },
  methods: {
    onUploadSuccess(res, file) {
      console.log(res, file);
      if (res.status && res.status > 0) {
        console.log(res.data.url);
        this.$message.success(res.info);
        this.$emit("update:pic", res.data.url);
      } else {
        this.$message.error(res.info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.upload {
  @include flex(center, center);
  flex-direction: column;
  width: 292px;
  height: 191px;
  background: #f6f6f6;
  box-shadow: 0px 2px 8px 0px rgba(202, 202, 202, 0.5);
  border-radius: 6px;

  .upload-pic {
    width: 100%;
    height: 100%;
  }

  .upload-group {
    @include flex(center, center);
    flex-direction: column;

    .upload-plus {
      margin-bottom: 10px;
      width: 32px;
      height: 32px;
    }

    .upload-title {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9e9e9e;
      line-height: 22px;
    }
  }
}
</style>
